<template lang="html">
	 <div id="app">
	<div class="vue1">
		<!--vue1-->
					<!--数据的显示：表达式和 v-text指令-->
			{{message}}
			<!--指令：把angular的ng换成v就是vue-->
			<span v-text="info"></span>
			<!--双向数据绑定   v-model-->
			<input type="text" name="" id="" v-model="message" />
			<hr />
			<!--循环数组显示数据-->
			<ul>
				<li v-for="(index,v) in lists">{{index}}---{{v.id}}---{{v.title}}</li>
				<li v-for="v in lists">{{v.id}}---{{v.title}}</li>
			</ul>
			<!--触发事件-->
			<button v-on:click="go()">点击</button>
			<button @click="run()">重击</button>
			<!--以上两种click事件本质是一样的，没有任何区别-->		
	</div>
	 <router-view></router-view>
  </div>
</template>

<script>
	export default {
		data () {
				return{
						//数据
					message: 'hello world',
					info: '我是Vue',
					lists: [{
							id: 1,
							title: '爱学习'
						},
						{
							id: 2,
							title: '爱宝宝'
						},
						{
							id: 3,
							title: '爱萤萤'
						},
						{
							id: 4,
							title: '爱国家'
						},
						{
							id: 5,
							title: '爱邯郸'
						},
					]
				}
			},
				methods:{
					go(){
						console.log('go go go')
					},
					run(){
						console.log('run')
					}
				}
	}

	
				

</script>

<style lang="css">
	.box{
				width:300px;
				height:300px;
				background:red;
			}
</style>